<template>
	<view class="login-password">
		<fui-toast ref="toast"></fui-toast>
			<view class="login-header">
				<view class="login-header-content">
					<view class="login-title">
						<text>账号密码登录</text>
					</view>
				</view>
			</view>
			
			
			<view class="login-body">
				<view class="login-body-content">
					<view class="login-password-top">
						<input type="text" placeholder="请输入账号" placeholder-class="plc" v-model="username">
					</view>
					<view class="login-password-bottom">
						<view class="user-tel">
							<input  :modelValue="upassword" @update:modelValue="upassword = $event" :type="eyeflag?'text':'password'" placeholder="请输入密码" placeholder-class="plc" >
						</view>
						<view class="login-password-eye" @click="changeEye">
							<image  mode="heightFix" :src="eyeflag?'../../../static/images/eye.png':'../../../static/images/eye-hidden.png'" class="changeEye"></image>
						</view>
					</view>
				</view>
				
				
				<view class="login-btn-box">
					<view class="immediately-login">
						<button type="warn" @click="userLogin">立即登录</button>
					</view>
					<view class="password-login">
						<button type="default" @click="toForgetPassword">忘记密码?</button>
						<button type="default" @click="toRegister">立即注册!</button>
					</view>
				</view>
			</view>
	</view>
</template>

<script setup>
	import { ref,onMounted,reactive,getCurrentInstance } from 'vue'
	// import { useStore } from 'vuex'
	import userApi from '@/static/assets/js/userApi.js'
	import timeOperation from '@/static/assets/js/timeOperation.js'
	const eyeflag = ref(false)
	const username = ref("")
	const upassword = ref("")
	const lastLoginTime = ref("")
	const that = getCurrentInstance()
	const userinfo = reactive({
		username,
		upassword,
		lastLoginTime 
	})
	
	const allUserInfo = reactive({})
	
	const toastOptions = reactive({
		text:"功能还未实现"
	})
	
	// const store = useStore()
	// console.log(store);
	const changeEye = () =>{
		eyeflag.value = !eyeflag.value
		// console.log(eyeflag.value);
	}
	
	const userLogin = () =>{
		lastLoginTime.value = timeOperation.getNowTime()
		let userData = JSON.stringify(userinfo)
		// console.log(userData);
		userApi.login(userData).then((resp)=>{
			let res = JSON.stringify(resp)
			// console.log(res);
			let reso = JSON.parse(res)
			// console.log(reso.type);
			console.log(reso);
			
			if(reso.type==2000){
				toastOptions.text = "登录成功! (๑•̀ㅂ•́)و✧"
				that.ctx.$refs.toast.show(toastOptions)
				// console.log(store);
				uni.navigateBack({
					delta:3,
					animationType:"pop-out",
					animationDuration:1000,
					success:function(){
						console.log("成功函数");
						// store.commit('userStore/changeUserInfo',reso.user)
						// store.commit('userStore/changeToken',reso.token)
						// console.log(store.state.userStore.token);
						uni.setStorageSync('token',reso.token)
						uni.setStorageSync('user',reso.user)
						uni.getStorage({
							key:'token',
							success:function(res) {
								uni.navigateBack({
									delta:2,
									success:function(){
										console.log("转用户主页");
									}
								})
							}
						})
					}
				})
			}else if(reso.type==3001){
				toastOptions.text = "用户名不存在!w(ﾟДﾟ)w"
				that.ctx.$refs.toast.show(toastOptions)
			}else if(reso.type==3002){
				toastOptions.text = "密码错误!(*￣(エ)￣)"
				that.ctx.$refs.toast.show(toastOptions)
			}
			else{
				toastOptions.text = "网络错误,请检查网络!w(ﾟДﾟ)w"
				that.ctx.$refs.toast.show(toastOptions)
			}
		})
	}
	
	const toForgetPassword = () =>{
		uni.navigateTo({
			url:'/pages/Login/LoginPasswordForget/LoginPasswordForget'
		})
	}
	
	const toRegister = () =>{
		uni.navigateTo({
			url:'/pages/Login/LoginRegister/LoginRegister'
		})
	}
	
	// const handleInput = function(){

	// 	console.log(upassword.value);
	// 	console.log(username.value);
	// }
</script>

<style lang="scss" scoped>
	body{
		background-color: #f9f9f9;
		// overflow-y:hidden;
	}
	uni-button[type='default']{
		// background-color: #fff;
		font-weight:500 ;
		font-size: 30rpx;
		color: rgba(0,0,0,0.7);
	}
	
	uni-button[type='warn']{
		background-color: #1aa034;
		font-weight:500 ;
		color: rgba(255,255,255,0.9);
		width: 100%;
	}
	
	uni-image{
		height: 40rpx;
	}
	
	.plc{
		color: #e1e1e1;
	}
	
	button::after{
		border:0;
	}
	
	.login-password{
		width: 100%;
		// height: 100vh;
		>.login-header{
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			>.login-header-content{
				width: 85%;
				>.login-title{
					font-size: 40rpx;
					font-weight: 600;
				}
			}
		}
		
		>.login-body{
			width: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-top: 55rpx;
			>.login-body-content{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 85%;
				background-color: #fff;
				border-radius: 15rpx;
				height: 200rpx;
				>.login-password-bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					>.user-tel{
						margin-left: 30rpx;
						font-weight: 600;
					}
					>.login-password-eye{

						margin-right: 30rpx;
						font-weight: 600;
						height: 100%;
						// color: #e9322e;
					}
				}
				>.login-password-top{
					margin-left: 30rpx;
					height: 60rpx;
					font-weight: 600;
					border-bottom: 2rpx #e1e1e1 dotted;
				}
			}
			
			.login-btn-box{
				margin-top: 40rpx;
				display: flex;
				width: 85%;
				align-items: center;
				flex-direction: column;
				>.immediately-login{
					width: 100%;
				}
				.password-login{
					margin-top: 30rpx;
					display: flex;
					width: 100%;
					justify-content: space-between;
				}
			}
			
			.protocol-box{
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 50rpx;
				font-size: 25rpx;
				>.protocol-contents{
					width: 85%;
				}
			}
		}
	}

</style>
